<template>
  <div v-loading="loading" class="network-detail-wrapper" element-loading-text="加载中...">
    <div v-if="detail" class="header">
      <div class="text">
        <div class="title">
          <h3>{{ detail.name }}</h3>
          <HStatus v-if="detail.status" type="info">禁用</HStatus>
          <HStatus v-else>启用</HStatus>
        </div>

        <div class="info_list">
          <div class="info_item">
            <div class="label">网点编号:</div>
            <div class="value">
              {{ detail.code }}
              <!-- <template v-if="detail.type === 0">销售网点、售后网点</template>
<template v-else-if="detail.type == 1">销售网点</template>
<template v-else>售后网点</template> -->
            </div>
          </div>
          <div class="info_item">
            <div class="label">所属部门:</div>
            <div class="value">
              <template v-if="detail.department">
                {{ detail.department.map((department) => department.name).join('、') }}
              </template>
            </div>
          </div>
          <div class="info_item">
            <div class="label">网点简称:</div>
            <div class="value">
              {{ detail.shorterName }}
            </div>
          </div>
          <div class="info_item">
            <div class="label">网点分类:</div>
            <div class="value">
              {{
                [detail.networkType, detail.twoNetworkType, detail.threeNetworkType]
                  .filter((o) => o)
                  .join('-')
              }}
            </div>
          </div>
          <div class="info_item">
            <div class="label">网点机构:</div>
            <div class="value">
              {{ detail.networkAgency }}
            </div>
          </div>

          <div class="info_item">
            <div class="label">网点模式:</div>
            <div class="value">
              <template v-if="detail.category === 1">内部网点</template>
              <template v-else-if="detail.category === 2">外部网点</template>
              <template v-else>第三方网点</template>
            </div>
          </div>
          <div class="info_item">
            <div class="label">团队模式:</div>
            <div class="value">{{ detail.teamType == 1 ? '团队' : '个人' }}</div>
          </div>
          <div class="info_item">
            <div class="label">创建:</div>
            <div class="value">{{ detail.createTime }}</div>
          </div>
          <div class="info_item">
            <div class="label">更新:</div>
            <div class="value">{{ detail.updateTime }}</div>
          </div>
        </div>
      </div>
      <div class="btn_group">
        <HPlainButton v-permission="'network_update'" @click="goEditDetails(detail.id)"
          >编辑网点</HPlainButton
        >
        <HPlainButton v-permission="'network_delete'" type="error" @click="onDelete(detail.id)"
          >删除网点</HPlainButton
        >
      </div>
    </div>
    <ul v-if="detail" class="list">
      <li>
        <div ref="myChart1" style="width: 100px; height: 100px"></div>
      </li>
      <li>
        <div ref="myChart6" style="width: 100px; height: 100px"></div>
      </li>
      <li>
        <div ref="myChart2" style="width: 100px; height: 100px"></div>
      </li>
      <li>
        <div ref="myChart3" style="width: 100px; height: 100px"></div>
      </li>
      <li>
        <div ref="myChart4" style="width: 100px; height: 100px"></div>
      </li>
      <li>
        <div ref="myChart5" style="width: 100px; height: 100px"></div>
      </li>
    </ul>
    <div class="table_container">
      <TablePane :team-type="detail?.teamType" @loading-change="loading = $event" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, reactive } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { useRoute, useRouter } from 'vue-router'
  import TablePane from './TablePane.vue'
  import * as echarts from 'echarts'
  import { getnetworkDetail, setDelete } from '@/api/network'
  import routeComponentName from '@/config/route-component-name'

  defineOptions({
    name: routeComponentName.network.networkDetail,
  })

  const router = useRouter()
  const route = useRoute()
  const detail = ref(null) //详情
  const loading = ref(false)
  const myChart1 = ref<HTMLElement | null>()
  const myChart2 = ref<HTMLElement | null>()
  const myChart3 = ref<HTMLElement | null>()
  const myChart4 = ref<HTMLElement | null>()
  const myChart5 = ref<HTMLElement | null>()
  const myChart6 = ref<HTMLElement | null>()
  const option1 = reactive({
    color: [
      // 颜色配置
      '#007cff',
      '#ccc',
    ],
    graphic: [
      // 文本块
      {
        type: 'text',
        left: 'center',
        top: 'center',
        style: {
          text: '全部工单',
          textAlign: 'center',
          fontSize: 12,
        },
      },
    ],
    tooltip: {
      // 提示框
    },
    series: [
      {
        tooltip: {
          // 提示框
          trigger: 'item',
          position: 'right',
          extraCssText: 'width:100%;',
          formatter(param) {
            return `${param.marker}${param.name} ${param.percent}%`
          },
          textStyle: {
            fontSize: 12,
          },
        },
        type: 'pie',
        radius: ['70%', '90%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
        },
        data: [],
      },
    ],
  })
  const option2 = reactive({
    color: [
      // 颜色配置
      '#007cff',
      '#ccc',
    ],
    graphic: [
      // 文本块
      {
        type: 'text',
        left: 'center',
        top: 'center',
        style: {
          text: '已完成工单',
          textAlign: 'center',
          fontSize: 12,
        },
      },
    ],
    tooltip: {},
    series: [
      {
        type: 'pie',
        radius: ['70%', '90%'],
        label: {
          show: false,
        },
        tooltip: {
          // 提示框
          trigger: 'item',
          position: 'right',
          extraCssText: 'width:100%;',
          formatter(param) {
            return `${param.marker}${param.name} ${param.percent}%`
          },
          textStyle: {
            fontSize: 12,
          },
        },
        data: [],
      },
    ],
  })
  const option3 = reactive({
    color: [
      // 颜色配置
      '#007cff',
      '#ccc',
    ],
    graphic: [
      // 文本块
      {
        type: 'text',
        left: 'center',
        top: 'center',
        style: {
          text: '已取消',
          textAlign: 'center',
          fontSize: 12,
        },
      },
    ],
    tooltip: {},
    series: [
      {
        type: 'pie',
        radius: ['70%', '90%'],
        label: {
          show: false,
        },
        tooltip: {
          // 提示框
          trigger: 'item',
          position: 'right',
          extraCssText: 'width:100%;',
          formatter(param) {
            return `${param.marker}${param.name} ${param.percent}%`
          },
          textStyle: {
            fontSize: 12,
          },
        },
        data: [],
      },
    ],
  })
  const option4 = reactive({
    color: [
      // 颜色配置
      '#007cff',
      '#ccc',
    ],
    graphic: [
      // 文本块
      {
        type: 'text',
        left: 'center',
        top: 'center',
        style: {
          text: '工单完成率',
          textAlign: 'center',
          fontSize: 12,
        },
      },
    ],
    tooltip: {},
    series: [
      {
        type: 'pie',
        radius: ['70%', '90%'],
        label: {
          show: false,
        },
        tooltip: {
          // 提示框
          trigger: 'item',
          position: 'right',
          extraCssText: 'width:100%;',
          formatter(param) {
            return `${param.marker}${param.name} ${param.percent}%`
          },
          textStyle: {
            fontSize: 12,
          },
        },
        data: [],
      },
    ],
  })
  const option5 = reactive({
    color: [
      // 颜色配置
      '#007cff',
      '#ccc',
    ],
    graphic: [
      // 文本块
      {
        type: 'text',
        left: 'center',
        top: 'center',
        style: {
          text: '待结算',
          textAlign: 'center',
          fontSize: 12,
        },
      },
    ],
    tooltip: {},
    series: [
      {
        type: 'pie',
        radius: ['70%', '90%'],
        label: {
          show: false,
        },
        tooltip: {
          // 提示框
          trigger: 'item',
          position: 'right',
          extraCssText: 'width:100%;',
          formatter(param) {
            return `${param.marker}${param.name} ${param.percent}%`
          },
          textStyle: {
            fontSize: 12,
          },
        },
        data: [],
      },
    ],
  })
  const option6 = reactive({
    color: [
      // 颜色配置
      '#007cff',
      '#ccc',
    ],
    graphic: [
      // 文本块
      {
        type: 'text',
        left: 'center',
        top: 'center',
        style: {
          text: '处理中工单',
          textAlign: 'center',
          fontSize: 12,
        },
      },
    ],
    tooltip: {},
    series: [
      {
        type: 'pie',
        radius: ['70%', '90%'],
        label: {
          show: false,
        },
        tooltip: {
          // 提示框
          trigger: 'item',
          position: 'right',
          extraCssText: 'width:100%;',
          formatter(param) {
            return `${param.marker}${param.name} ${param.percent}%`
          },
          textStyle: {
            fontSize: 12,
          },
        },
        data: [],
      },
    ],
  })
  function initChart() {
    const Chart1 = echarts.init(myChart1.value)
    const Chart2 = echarts.init(myChart2.value)
    const Chart3 = echarts.init(myChart3.value)
    const Chart4 = echarts.init(myChart4.value)
    const Chart5 = echarts.init(myChart5.value)
    const Chart6 = echarts.init(myChart6.value)
    Chart1.setOption(option1)
    Chart2.setOption(option2)
    Chart3.setOption(option3)
    Chart4.setOption(option4)
    Chart5.setOption(option5)
    Chart6.setOption(option6)
    Chart1.resize()
    Chart2.resize()
    Chart3.resize()
    Chart4.resize()
    Chart5.resize()
    Chart6.resize()
  }
  // 获取详情
  const getNetworkDetail = async () => {
    loading.value = true
    await getnetworkDetail(route.params.id).then((res) => {
      if (res.data.success) {
        detail.value = res.data.data.row
        option1.graphic[0].style.text = detail.value.totalOrderQty + '\n\n' + '全部工单'
        option1.series[0].data = [{ value: detail.value.totalOrderQty, name: '全部工单' }]
        option2.graphic[0].style.text = detail.value.finishOrderQty + '\n\n' + '已完成工单'
        option2.series[0].data = [
          { value: detail.value.finishOrderQty || '', name: '已完成' },
          { value: detail.value.totalOrderQty - detail.value.finishOrderQty, name: '未完成' },
        ]
        option3.graphic[0].style.text = detail.value.cancelOrderQty + '\n\n' + '已取消'
        option3.series[0].data = [
          { value: detail.value.cancelOrderQty || '', name: '已取消' },
          { value: detail.value.totalOrderQty - detail.value.cancelOrderQty, name: '未取消' },
        ]
        option4.graphic[0].style.text =
          (detail.value.totalOrderQty == 0
            ? 0
            : Math.round((detail.value.finishOrderQty * 100) / detail.value.totalOrderQty).toFixed(
                0,
              )) +
          '%' +
          '\n\n' +
          '工单完成率'
        option4.series[0].data = [
          { value: detail.value.finishOrderQty || '', name: '工单完成率' },
          { value: detail.value.totalOrderQty - detail.value.finishOrderQty, name: '未完成率' },
        ]
        option5.graphic[0].style.text = detail.value.orderWaitSettlementQty + '\n\n' + '待结算'
        option5.series[0].data = [
          { value: detail.value.orderSettlementQty || '', name: '已结算' },
          { value: detail.value.orderWaitSettlementQty, name: '待结算' },
        ]
        option6.graphic[0].style.text = detail.value.handlerOrderQty + '\n\n' + '处理中工单'
        option6.series[0].data = [
          { value: detail.value.handlerOrderQty || '', name: '处理中' },
          { value: detail.value.totalOrderQty - detail.value.handlerOrderQty, name: '未处理' },
        ]
      } else {
        ElMessage({
          showClose: true,
          message: res.data.message,
          type: 'error',
          duration: 5000,
          plain: true,
        })
      }
      loading.value = false
    })
  }
  // 详情删除网点
  async function onDelete(id: string) {
    ElMessageBox({
      title: '提示',
      message: '确认删除的该网点?',
      showCancelButton: true,
      closeOnClickModal: false,
      type: 'error',
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      autofocus: false,
    })
      .then(async () => {
        loading.value = true

        await setDelete([id]).then((res) => {
          if (res.data.success) {
            ElMessage({
              showClose: true,
              message: res.data.message,
              type: 'success',
              duration: 5000,
              plain: true,
            })
            router.push('/net/list')
          } else {
            ElMessage({
              showClose: true,
              message: res.data.message,
              type: 'error',
              duration: 5000,
              plain: true,
            })
          }
          loading.value = false
        })
      })
      .catch()
  }
  const goEditDetails = (id: string) => {
    router.push('/net/editDetails/' + id)
  }
  onMounted(async () => {
    await getNetworkDetail()
    initChart()
  })
</script>

<style scoped lang="scss">
  @import './index';
</style>
